<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>send email</title>
    <!--
    Template 2105 Input
    http://www.tooplate.com/view/2105-input
    -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/materialize.min.css">
    <link rel="stylesheet" href="css/tooplate.css">
    <script src="js/getParameter.js"></script>
</head>

<body id="login">
<div class="container">
    <div class="row tm-register-row tm-mb-35">
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 tm-login-l">
            <form id="updateForm" method="post" class="tm-bg-black p-5 h-100">
                <div class="input-field"  >
                 <input  id="username" name="username" type="text" class="validate" readonly>
                </div>
                <div class="input-field">
                    <input placeholder="请输入新密码" id="password" name="password" type="password" class="validate">
                    <span><label class="error" for="password" style="display: none"></label></span>
                </div>
                <div class="input-field ">
                    <input placeholder="确认密码" id="repassword" name="repassword" type="password" class="validate">
                    <span><label class="error" for="repassword" style="display: none"></label></span>
                </div>
                <div class="input-field ">
                    <input placeholder="请输入验证码" type="text" id="check" name="check" class="validate">
                    <span><label class="error" for="check" style="display: none"></label></span>
                </div>
                <div class="input-field">
                    <img src="/photograph/check/checkCode" id="imgCode" height="60px" alt=""
                         onclick="changeCheckCode(this)"
                         style="cursor: pointer;float: right">
                    <script type="text/javascript">
                        //图片点击事件
                        function changeCheckCode(img) {
                            img.src = "/photograph/check/checkCode?" + new Date().getTime();
                        }
                    </script>
                    <input id="updateButton" type="button" style="margin-right: 36px"
                           class="waves-effect btn-large btn-large-white px-4 black-text" value="Modify"></input>
                </div>
            </form>
        </div>
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 tm-login-r">
            <header class="font-weight-light tm-bg-black p-5 h-100">
                <h4 class="mt-0 text-white font-weight-light">Forget Password</h4>
                <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                <p class="mb-0">Vestibulum neque neque, porttitor quis lacinia eu, iaculis id dui. Mauris quis velit
                    lectus.</p>
            </header>
        </div>
    </div>

    <footer class="row tm-mt-big mb-3">
        <div class="col-xl-12 text-center">
            <p class="d-inline-block tm-bg-black white-text py-2 tm-px-5">
                Copyright &copy; 2018 Company Name
                - <a rel="nofollow" href="http://www.tooplate.com/view/2105-input">Input</a> by
                <a rel="nofollow" href="http://tooplate.com" class="tm-footer-link">Tooplate</a>
            </p>
        </div>
    </footer>
</div>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script>
    $(function () {
        var username = getParameter("username");
        $("#username").val(username);

        $("#updateButton").click(function () {
            $.get("/photograph/user/updatePassword", $("#updateForm").serialize(),
                function (data) {
                    var isPass = $("#updateForm").valid();
                    if (!isPass) {
                        return;
                    } else {
                        alert("密码修改完成")
                        location.href="/photograph/index.html";
                    }
                }, "json")
        })
        $("#updateForm").validate({
            rules: {
                username: {
                    required: true,
                    // 正则表达式
                    checkUsername: true,
                },
                password: {
                    required: true,
                    checkPassword: true
                },
                repassword: {
                    required: true,
                    equalTo: "#password",
                },
                email: {
                    required: true,
                    email: true,
                },
                name: {
                    required: true,
                },
                telephone: {
                    required: true,
                },
                birthday: {
                    required: true,
                },
                check: {
                    required: true,
                    // 验证码是否正确
                    checkCode: true,
                }
            },
            messages: {
                username: {
                    required: "用户名不能为空",
                    checkUsername: "必须是字母开头,至少6位",

                },
                password: {
                    required: "请输入密码",
                    checkPassword: "必须是字母开头,至少6位"
                }, repassword: {
                    required: "请确认密码",
                    equalTo: "密码不同"
                },
                email: {
                    required: "邮箱不能为空",
                    email: "请输入正确的邮箱格式"
                },
                name: {
                    required: "名字不能为空"
                },
                telephone: {
                    required: "联系方式不能为空",
                },
                birthday: {
                    required: "出生日期不能为空"
                },
                check: {
                    required: "验证码不能为空",
                    // 验证码是否正确
                    checkCode: "验证码错误",
                }
            }


        });
        // 判断用户名格式是否规范
        $.validator.addMethod("checkUsername",
            function (value, element, params) {
                var reg = /^[a-zA-Z_]\w{5,15}$/;
                return reg.test(value);
            });
        // 判断用户密码格式是否正确
        $.validator.addMethod("checkPassword",
            function (value, element, params) {
                var reg = /^[a-zA-Z_]\w{5,15}$/;
                return reg.test(value);
            });

        // 判断验证码是否正确
        $.validator.addMethod("checkCode",
            function (value, element, params) {
                var isPass = false;
                $.ajax({
                    async: false,
                    url: "/photograph/check/checkCodeValue",
                    data: {check: value},
                    success: function (data) {
                        isPass = data.flag;
                    },
                    dataType: "json"
                });
                return isPass;
            });
    })

</script>
</body>

</html>